<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS转换(Transform)测试案例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            text-align: center;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
        }

        h2 {
            color: #444;
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 2px solid #ddd;
            padding-bottom: 8px;
        }

        h3 {
            color: #555;
            margin-top: 20px;
        }

        p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: left;
        }

        .test-cases {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .test-case {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 15px;
            text-align: center;
        }

        .demo-box {
            width: 120px;
            height: 120px;
            margin: 15px auto;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-radius: 8px;
            cursor: pointer;
            user-select: none;
            transition: transform 0.5s ease;
        }

        .demo-box:hover {
            opacity: 0.9;
        }

        .demo-box-active {
            background-color: #2196F3;
        }

        .code-section {
            margin-top: 15px;
            background-color: #f0f0f0;
            border-radius: 4px;
            padding: 10px;
            text-align: left;
            overflow-x: auto;
        }

        pre {
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 12px;
            line-height: 1.4;
        }

        code {
            color: #d63384;
        }

        .controls {
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        button {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            background-color: #2196F3;
            color: white;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0b7dda;
        }

        /* 3D变换相关样式 */
        .perspective-container {
            perspective: 1000px;
            margin: 20px auto;
            width: 150px;
            height: 150px;
        }

        .preserve-3d {
            transform-style: preserve-3d;
            position: relative;
        }

        /* 测试案例1：旋转 */
        .rotate-45 {
            transform: rotate(45deg);
        }

        .rotate-90 {
            transform: rotate(90deg);
        }

        .rotate-180 {
            transform: rotate(180deg);
        }

        .rotate-270 {
            transform: rotate(270deg);
        }

        /* 测试案例2：缩放 */
        .scale-05 {
            transform: scale(0.5);
        }

        .scale-15 {
            transform: scale(1.5);
        }

        .scale-x {
            transform: scaleX(1.5);
        }

        .scale-y {
            transform: scaleY(1.5);
        }

        /* 测试案例3：平移 */
        .translate-x-20 {
            transform: translateX(20px);
        }

        .translate-y-20 {
            transform: translateY(20px);
        }

        .translate-xy {
            transform: translate(20px, 10px);
        }

        /* 测试案例4：倾斜 */
        .skew-10 {
            transform: skew(10deg, 0);
        }

        .skew-xy {
            transform: skew(10deg, 5deg);
        }

        .skew-x {
            transform: skewX(10deg);
        }

        .skew-y {
            transform: skewY(10deg);
        }

        /* 测试案例5：组合变换 */
        .combo-1 {
            transform: rotate(10deg) scale(1.1) translate(10px, 5px);
        }

        .combo-2 {
            transform: skew(5deg) rotate(5deg) scale(0.9);
        }

        /* 测试案例6：变换原点 */
        .origin-top-left {
            transform-origin: top left;
            transform: rotate(15deg);
        }

        .origin-top-right {
            transform-origin: top right;
            transform: rotate(15deg);
        }

        .origin-bottom-left {
            transform-origin: bottom left;
            transform: rotate(15deg);
        }

        .origin-bottom-right {
            transform-origin: bottom right;
            transform: rotate(15deg);
        }

        .origin-center {
            transform-origin: center center;
            transform: rotate(15deg);
        }

        .origin-custom {
            transform-origin: 30% 70%;
            transform: rotate(15deg);
        }

        /* 测试案例7：3D旋转 */
        .rotate-x {
            transform: rotateX(45deg);
        }

        .rotate-y {
            transform: rotateY(45deg);
        }

        .rotate-z {
            transform: rotateZ(45deg);
        }

        .rotate-3d {
            transform: rotate3d(1, 1, 1, 45deg);
        }

        /* 测试案例8：3D平移 */
        .translate-z-30 {
            transform: translateZ(30px);
        }

        .translate-3d {
            transform: translate3d(10px, 10px, 30px);
        }

        .case-descriptions {
            text-align: left;
            margin-top: 20px;
        }

        .case-descriptions li {
            margin-bottom: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS转换(Transform)测试案例</h1>
        <p>本页面展示了CSS转换效果的各种应用场景和属性组合。转换可以改变元素的形状、大小和位置，包括2D和3D变换。点击各个控制按钮查看效果。</p>

        <div class="test-cases">
            <!-- 测试案例1：旋转 -->
            <div class="test-case">
                <h3>案例1：2D旋转 (rotate)</h3>
                <div class="demo-box" id="rotateBox">旋转效果</div>
                <div class="controls">
                    <button onclick="applyTransform('rotateBox', 'rotate(45deg)')">45°</button>
                    <button onclick="applyTransform('rotateBox', 'rotate(90deg)')">90°</button>
                    <button onclick="applyTransform('rotateBox', 'rotate(180deg)')">180°</button>
                    <button onclick="applyTransform('rotateBox', 'rotate(270deg)')">270°</button>
                    <button onclick="applyTransform('rotateBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* 旋转45度 */
transform: rotate(45deg);

/* 旋转90度 */
transform: rotate(90deg);

/* 负角度逆时针旋转 */
transform: rotate(-45deg);</code></pre>
                </div>
            </div>

            <!-- 测试案例2：缩放 -->
            <div class="test-case">
                <h3>案例2：缩放 (scale)</h3>
                <div class="demo-box" id="scaleBox">缩放效果</div>
                <div class="controls">
                    <button onclick="applyTransform('scaleBox', 'scale(0.5)')">缩小0.5倍</button>
                    <button onclick="applyTransform('scaleBox', 'scale(1.5)')">放大1.5倍</button>
                    <button onclick="applyTransform('scaleBox', 'scaleX(1.5)')">X轴放大</button>
                    <button onclick="applyTransform('scaleBox', 'scaleY(1.5)')">Y轴放大</button>
                    <button onclick="applyTransform('scaleBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* 等比例缩小 */
transform: scale(0.5);

/* 等比例放大 */
transform: scale(1.5);

/* 仅X轴缩放 */
transform: scaleX(1.5);

/* 仅Y轴缩放 */
transform: scaleY(1.5);</code></pre>
                </div>
            </div>

            <!-- 测试案例3：平移 -->
            <div class="test-case">
                <h3>案例3：平移 (translate)</h3>
                <div class="demo-box" id="translateBox">平移效果</div>
                <div class="controls">
                    <button onclick="applyTransform('translateBox', 'translateX(20px)')">X轴平移</button>
                    <button onclick="applyTransform('translateBox', 'translateY(20px)')">Y轴平移</button>
                    <button onclick="applyTransform('translateBox', 'translate(20px, 10px)')">XY轴平移</button>
                    <button onclick="applyTransform('translateBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* X轴正方向平移 */
transform: translateX(20px);

/* Y轴正方向平移 */
transform: translateY(20px);

/* XY轴同时平移 */
transform: translate(20px, 10px);

/* 负方向平移 */
transform: translate(-20px, -10px);</code></pre>
                </div>
            </div>

            <!-- 测试案例4：倾斜 -->
            <div class="test-case">
                <h3>案例4：倾斜 (skew)</h3>
                <div class="demo-box" id="skewBox">倾斜效果</div>
                <div class="controls">
                    <button onclick="applyTransform('skewBox', 'skew(10deg, 0)')">X轴倾斜</button>
                    <button onclick="applyTransform('skewBox', 'skew(0, 10deg)')">Y轴倾斜</button>
                    <button onclick="applyTransform('skewBox', 'skew(10deg, 5deg)')">XY轴倾斜</button>
                    <button onclick="applyTransform('skewBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* X轴倾斜 */
transform: skew(10deg, 0);

/* Y轴倾斜 */
transform: skew(0, 10deg);

/* XY轴同时倾斜 */
transform: skew(10deg, 5deg);

/* 负角度倾斜 */
transform: skew(-10deg, -5deg);</code></pre>
                </div>
            </div>

            <!-- 测试案例5：组合变换 -->
            <div class="test-case">
                <h3>案例5：组合变换</h3>
                <div class="demo-box" id="comboBox">组合效果</div>
                <div class="controls">
                    <button onclick="applyTransform('comboBox', 'rotate(10deg) scale(1.1) translate(10px, 5px)')">组合1</button>
                    <button onclick="applyTransform('comboBox', 'skew(5deg) rotate(5deg) scale(0.9)')">组合2</button>
                    <button onclick="applyTransform('comboBox', 'translate(-10px, -5px) rotate(-15deg)')">组合3</button>
                    <button onclick="applyTransform('comboBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* 旋转、缩放、平移组合 */
transform: rotate(10deg) scale(1.1) translate(10px, 5px);

/* 倾斜、旋转、缩放组合 */
transform: skew(5deg) rotate(5deg) scale(0.9);

/* 注意：变换顺序会影响最终效果 */</code></pre>
                </div>
            </div>

            <!-- 测试案例6：变换原点 -->
            <div class="test-case">
                <h3>案例6：变换原点 (transform-origin)</h3>
                <div class="demo-box" id="originBox">原点效果</div>
                <div class="controls">
                    <button onclick="setOrigin('originBox', 'top left')">左上</button>
                    <button onclick="setOrigin('originBox', 'top right')">右上</button>
                    <button onclick="setOrigin('originBox', 'bottom left')">左下</button>
                    <button onclick="setOrigin('originBox', 'bottom right')">右下</button>
                    <button onclick="setOrigin('originBox', 'center center')">中心</button>
                    <button onclick="setOrigin('originBox', '30% 70%')">自定义</button>
                    <button onclick="resetOrigin('originBox')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* 设置变换原点并应用旋转 */
transform-origin: top left;
transform: rotate(15deg);

/* 其他常用原点位置 */
transform-origin: top right;
transform-origin: bottom left;
transform-origin: bottom right;
transform-origin: center center;
transform-origin: 30% 70%; /* 自定义百分比 */</code></pre>
                </div>
            </div>

            <!-- 测试案例7：3D旋转 -->
            <div class="test-case">
                <h3>案例7：3D旋转</h3>
                <div class="perspective-container">
                    <div class="demo-box preserve-3d" id="rotate3dBox">3D旋转</div>
                </div>
                <div class="controls">
                    <button onclick="applyTransform('rotate3dBox', 'rotateX(45deg)')">X轴旋转</button>
                    <button onclick="applyTransform('rotate3dBox', 'rotateY(45deg)')">Y轴旋转</button>
                    <button onclick="applyTransform('rotate3dBox', 'rotateZ(45deg)')">Z轴旋转</button>
                    <button onclick="applyTransform('rotate3dBox', 'rotate3d(1, 1, 1, 45deg)')">3D旋转</button>
                    <button onclick="applyTransform('rotate3dBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* X轴3D旋转 */
transform: rotateX(45deg);

/* Y轴3D旋转 */
transform: rotateY(45deg);

/* Z轴3D旋转 */
transform: rotateZ(45deg);

/* 三维向量3D旋转 */
transform: rotate3d(1, 1, 1, 45deg);

/* 父容器需要设置透视 */
.parent {
  perspective: 1000px;
}</code></pre>
                </div>
            </div>

            <!-- 测试案例8：3D平移 -->
            <div class="test-case">
                <h3>案例8：3D平移</h3>
                <div class="perspective-container">
                    <div class="demo-box preserve-3d" id="translate3dBox">3D平移</div>
                </div>
                <div class="controls">
                    <button onclick="applyTransform('translate3dBox', 'translateZ(30px)')">Z轴平移</button>
                    <button onclick="applyTransform('translate3dBox', 'translate3d(10px, 10px, 30px)')">3D平移</button>
                    <button onclick="applyTransform('translate3dBox', 'none')">重置</button>
                </div>
                <div class="code-section">
                    <pre><code>/* Z轴3D平移 */
transform: translateZ(30px);

/* 三维3D平移 */
transform: translate3d(10px, 10px, 30px);

/* 注意：负值会使元素远离观察者 */
transform: translateZ(-30px);</code></pre>
                </div>
            </div>
        </div>

        <div class="case-descriptions">
            <h2>CSS转换属性详解</h2>
            <p>CSS转换属性允许你改变元素的形状、大小和位置，可以创建2D或3D效果。主要的转换函数包括：</p>
            
            <h3>2D转换函数：</h3>
            <ul>
                <li><strong>rotate(angle)</strong>：以元素的中心点为原点旋转指定角度。</li>
                <li><strong>scale(x, y)</strong>：缩放元素，x和y分别表示水平和垂直方向的缩放比例。</li>
                <li><strong>translate(x, y)</strong>：平移元素，x和y分别表示水平和垂直方向的偏移量。</li>
                <li><strong>skew(x-angle, y-angle)</strong>：倾斜元素，x-angle和y-angle分别表示水平和垂直方向的倾斜角度。</li>
                <li><strong>matrix(a, b, c, d, e, f)</strong>：使用矩阵变换，可以组合以上所有效果。</li>
            </ul>
            
            <h3>3D转换函数：</h3>
            <ul>
                <li><strong>rotateX(angle)</strong>：围绕X轴旋转元素。</li>
                <li><strong>rotateY(angle)</strong>：围绕Y轴旋转元素。</li>
                <li><strong>rotateZ(angle)</strong>：围绕Z轴旋转元素。</li>
                <li><strong>rotate3d(x, y, z, angle)</strong>：围绕自定义的三维向量旋转元素。</li>
                <li><strong>translateX(x)</strong>：沿X轴平移元素。</li>
                <li><strong>translateY(y)</strong>：沿Y轴平移元素。</li>
                <li><strong>translateZ(z)</strong>：沿Z轴平移元素。</li>
                <li><strong>translate3d(x, y, z)</strong>：沿三维空间平移元素。</li>
                <li><strong>scaleX(x)</strong>：沿X轴缩放元素。</li>
                <li><strong>scaleY(y)</strong>：沿Y轴缩放元素。</li>
                <li><strong>scaleZ(z)</strong>：沿Z轴缩放元素。</li>
                <li><strong>scale3d(x, y, z)</strong>：沿三维空间缩放元素。</li>
                <li><strong>perspective(n)</strong>：设置透视效果，定义3D元素距视图的距离。</li>
            </ul>
            
            <h3>辅助属性：</h3>
            <ul>
                <li><strong>transform-origin</strong>：设置变换的原点，默认为元素的中心点。</li>
                <li><strong>transform-style</strong>：设置元素的子元素是否位于3D空间中，值为flat（默认，平面）或preserve-3d（保留3D效果）。</li>
                <li><strong>perspective</strong>：设置透视效果，通常应用于父元素。</li>
                <li><strong>perspective-origin</strong>：设置透视的原点位置。</li>
                <li><strong>backface-visibility</strong>：设置元素背面是否可见。</li>
            </ul>
        </div>
    </div>

    <script>
        // 应用变换效果
        function applyTransform(elementId, transformValue) {
            const box = document.getElementById(elementId);
            box.style.transform = transformValue;
            
            // 添加激活状态样式
            if (transformValue !== 'none') {
                box.classList.add('demo-box-active');
            } else {
                box.classList.remove('demo-box-active');
            }
        }

        // 设置变换原点
        function setOrigin(elementId, originValue) {
            const box = document.getElementById(elementId);
            box.style.transformOrigin = originValue;
            box.style.transform = 'rotate(15deg)';
            box.classList.add('demo-box-active');
        }

        // 重置变换原点
        function resetOrigin(elementId) {
            const box = document.getElementById(elementId);
            box.style.transformOrigin = 'center center';
            box.style.transform = 'none';
            box.classList.remove('demo-box-active');
        }
    </script>
</body>
</html>